{% stylesheet %}
.block_product_single {
    max-width: var(--general_layout_width);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    margin: 0 auto;
}

.block_product-fill {
    width: 100%;
    max-width: 100%;
}

.block_product_single-right {
    flex-direction: row-reverse;
}

.block_product_single .product-photo {
    width: 50%;
    box-sizing: border-box;
}

.block_product_single .product-photo .product-photo-item {
    width: 100%;
    margin-bottom: 20px;
}

.block_product_single .product-photo .product-photo-item img {
    width: 100%;
    vertical-align: top;
}

.block_product_single .product-info {
    width: 50%;
    padding: 0 30px;
    box-sizing: border-box;
}

.block_product_single .product-info .cell-item {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.block_product_single .product-info .product-info-title {
    text-align: center;
    font-size: var(--big_product_font_size);
    margin-bottom: 20px;
}

.block_product_single .product-info .product-info-subtitle {
    text-align: center;
    margin-bottom: 12px;
    color: var(--title_color);
    font-size: var(--product_font_size);
}

.block_product_single .product-info .product-info-describe {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--detail_color);
}

.block_product_single .product-info .product-sku-name {
    font-size: 1rem;
    color: var(--color-text-medium);
    line-height: 1.2857142857rem;
}

.block_product_single .product-info .product-price {
    font-size: 1.4285714286rem;
    line-height: 1.7142857143rem;
    display: flex;
}

.block_product_single .product-info .product-price .product-price-number {
    color: var(--assist-color);
}

.block_product_single .product-info .product-price .product-price-market {
    color: var(--color-text-low);
    text-decoration: line-through;
    margin-left: 10px;
}

.block_product_single .product-info .product-sku-values {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.block_product_single .product-info .product-sku-values .product-sku-values-item {
    display: flex;
    align-items: center;
    color: var(--color-main);
    font-size: 1rem;
    /**  line-height: 2.2857142857rem;
    height: 2.2857142857rem;
     **/
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid transparent;
    cursor: pointer;
    margin-bottom:12px;
}

.block_product_single .product-info .product-sku-values .product-sku-values-item+.product-sku-values-item {
    margin-left: 20px;
}

.block_product_single .product-info .product-sku-values .product-sku-values-item:hover {
    border: 1px solid var(--color-main);
}

.block_product_single .product-info .product-sku-values .product-sku-values-item-active {
    border: 1px solid var(--color-main);
}
.block_product_single .product-info .product-sku-values img{
    width: 40px;
    vertical-align: middle;
    height: 40px;
    margin-right: 6px;
    object-fit: cover;
}

.block_product_single .product-info .product-calculator {
    height: 44px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.block_product_single .product-info .product-calculator .product-calculator-handle,
.block_product_single .product-info .product-calculator .product-calculator-value {
    width: 44px;
    text-align: center;
    line-height: 44px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}

.block_product_single .product-info .product-calculator .product-calculator-value {
    margin: 0 30px;
    font-size: 1rem;
    color: var(--color-main);
}

.block_product_single .product-info .product-calculator .product-calculator-handle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.block_product_single .product-info .product-calculator .add-icon {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
}

.block_product_single .product-info .product-calculator .add-icon::before {
    position: absolute;
    left: 0;
    top: 7px;
    width: 15px;
    height: 1px;
    opacity: 0.9;
    background: var(--color-main);
    border-radius: 1px;
    content: "";
}

.block_product_single .product-info .product-calculator .add-icon::after {
    position: absolute;
    left: 7px;
    width: 1px;
    height: 15px;
    opacity: 0.9;
    background: var(--color-main);
    border-radius: 1px;
    content: "";
}

.block_product_single .product-info .product-calculator .reduce-icon {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
}

.block_product_single .product-info .product-calculator .reduce-icon::before {
    position: absolute;
    left: 0;
    top: 7px;
    width: 15px;
    height: 1px;
    opacity: 0.9;
    background: var(--color-main);
    border-radius: 1px;
    content: "";
}

.block_product_single .product-info .product-btns {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.block_product_single .product-info .product-btns .add-cart{
    width: 100%;
    margin: 0 0 15px;
    box-sizing: border-box;
}
.block_product_single .product-info .product-btns .buynow{
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.block_product_single .product-info .product-btns .divider {
    width: 20px;
}

@media screen and (max-width:787px) {
    .block_product_single {
        display: flex;
        flex-direction: column;
    }

    .block_product_single .product-photo {
        width: 100%;
        padding: 0 15px;
    }
    .block_product_single .product-info {
        width: 100%;
        padding: 0 15px;
    }
}
@media screen and (min-width:788px) and (max-width:1090px) {
    .block_product_single .product-photo {
        width: 100%;
        padding: 0 25px 0 50px;
    }
    .block_product_single .product-info {
        width: 100%;
        padding:  0 25px 0 25px;
    }
}
.block_product_single .cell-star{
    display: flex;
    justify-content: center;
    margin-top:12px;
    margin-bottom: 15px;
}
.block_product_single .product-comment-fraction {
    display: flex;
    align-items: center;
}

.block_product_single .product-comment-fraction svg {
    margin-right: 4px;
  }

.block_product_single .product-comment-fraction>svg:last-child {
    margin-right: 0;
  }

.block_product_single .product-comment-fraction span {
    font-weight: 500;
    color: #1d1f21;
    font-size: 18px;
    line-height: 1;
    margin-left: 6px;
}

.block_product_single .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }
.block_product_single .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.block_product_single .comment-star-warp-choose svg {
    flex-shrink: 0;
  }
{% endstylesheet %}

{% if section.settings.good.id %}
{% assign block_id = block_id | default : section.block_id  %}
{% assign defaultImageEmpty = 'empty.png' | public_asset_abs_url   %}

{% get_product product_id={section.settings.good.id} %}
{% if product %}
 <div id="block_product_single-{{ block_id | default: 'test' }}" class="block_product_single block_product_single-{{ section.settings.position }} {% if section.settings.is_width_fill %}block_product-fill{% endif %}">
    <div class="product-photo">
        <div class="product-photo-item">
          <a href="/products/{{ product.handle }}?data_from={{data_from}}">
            <img data-src="{{ product.image.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" id="single-product-block-{{ block_id }}"  {% if product.image.alt == "" %}alt="{{ product.title }}"{% else %}alt="{{ product.image.alt }}"{% endif %} />
            </a>
        </div>
        {% if section.settings.good.id == "" %}
        <div class="product-photo-item">
            <img  src="{{ 'empty.png' | public_asset_abs_url }}"  />
        </div>
        {% endif %}

        
    </div>
    <div class="product-info" id="sku-option-{{ block_id }}">
        <!-- title -->
        <div class="product-info-title general_title-color"><a href="/products/{{ product.handle }}?data_from={{data_from}}">{{ product.title | default: "Title" }}</a></div>
        {% if product.comment_count > 0 %}
        <div class="cell-star">
        <div class="product-comment-fraction">
          <div class="comment-star-warp">
              {% for index in (1..5) %}
              {% include icon_block_star ,{width:"20",height:"20",color: "#bbbbbb"} %}
              {% endfor %}
              {% assign star = 0 %}
              {% if  product.star %}  {% assign star = product.star | divided_by: 5 | times:100 %} {% endif %}
              <div class="comment-star-warp-choose" style="width:{{star}}%">
                {% for index in (1..5) %}
                {% include icon_block_star ,{width:"20",height:"20",color: "#F8AD6B"} %}
                {% endfor %}
              </div>
            </div>
            <span>({{product.star}})</span>
        </div>
        </div>
        {% endif %}
        {% if section.settings.subtitle %}
        <div class="product-info-subtitle">{{ product.subtitle }}</div>
        {% endif %}
        {% if section.settings.describe %}
        <div class="product-info-describe">{{ product.mini_detail }}</div>
        {% endif %}
        
        <div class="product-info-divider"></div>
        <div class="cell-item" style="margin-top: 0">
            <div class="product-price">
                <span class="product-price-number general_buying-color">{{ currency.symbol_left }}{{ product.variant_price_max | default: "0.00" }}</span>
                {% if product.variant_compare_at_price_max %}
                <span class="product-price-market general_original-color">{{ currency.symbol_left }}{{ product.variant_compare_at_price_max }}</span>
                {% endif %}
            </div>
        </div>
        <div class="sku-cell"></div>
        <div class="cell-item">
            <span class="product-sku-name">Quantity</span>
        </div>
        <div class="cell-item">
            <div class="product-calculator mo-quantity" data-id="{{ block_id | default: 'test'  }}">
                <div class="product-calculator-handle" data-type="reduce">
                    {% include icon_minus ,{width:'16',height:'16'} %}
                </div>
                <div class="product-calculator-value">1</div>
                <div class="product-calculator-handle" data-type="add">
                    {% include icon_plus ,{width:'16',height:'16'} %}
                </div>
            </div>
        </div>
        <div class="cell-item">
            <div class="product-btns">
                {% if product.available == 0  %}
                <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.product.out_of_stock}}</div>
                {% else %}
                <div class="secondary_btn add-cart" data-id="{{ block_id | default: 'test'  }}">{{lang.product.add_to_cart}}</div>
                <div class="main_btn buynow" data-id="{{ block_id | default: 'test'  }}">{{lang.product.buy_it_now}}</div>
                {% endif %}

            </div>
        </div>
        {% unless product.available == 0 %}
        {% get_payments %}
        {% if payment %}
            <div class="cell-item" style="margin-top:17px">
                {% include product_payment_paypalcheckout , { pay_block_id:block_id } %}
            </div>
        {% endif %}
        {% endunless %}
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var productInfo = {{product | json}};

        console.log(productInfo);
        const productDetail = new omesaasProduct({
            product: productInfo,
            data_from:'{{ data_from }}',
            ec_currency_code: '{{ base_currency.standard_code }}',
            id: '#sku-option-{{ block_id }}',
            changeOption: function (params) {
                if(params.image && params.image.src){
                    const imgNode = $("#single-product-block-{{ block_id }}");
                    imgNode.attr('data-src',params.image.src);
                    addLazyImages(imgNode)
                }
                //设置页面缓存
                moi.setPageStorage('product_params', params);
            }
        })

        //payPal支付成功回调
        moi.addEvent('paypalec_callback', function (event) {
            //判断支付成功payid是否等于当前积木块id
            if(event.params.payId === '{{block_id}}'){
                productDetail.callbackAddToCart();
            }
        })

        moi.quantity({
            dom: $(".mo-quantity[data-id='{{ block_id | default: 'test' }}']"),
            change(val) {
                productDetail.setSelectedVal({ quantity: val.value });
                qty = val.value;
            }
        })


        //加入购物车
        $(".add-cart[data-id='{{ block_id | default: 'test' }}']").click(function () {
            if (!productDetail.verifyOption('cart')) {
                return false
            }
            var load = moi.nodeShowLoading(this, "mo-loading-black")
            productDetail.addCart(function () { load.close(); }, function (data) {
                if (!data.code) {
                    productDetail.cartLayer();
                } else {
                    return moi.alert({
                        title: data.msg
                    });
                }
            })
        })


        //直接购买
        $(".buynow[data-id='{{ block_id | default: 'test' }}']").click(function () {
            if (!productDetail.verifyOption('buy')) {
                return false
            }
            var load = moi.nodeShowLoading(this)
            productDetail.buynow(function () { load.close(); }, function (ret) {
                if (!ret.code) {
                    window.location.href = ret.data.checkout_url
                } else {
                    return moi.alert({
                        title: ret.msg
                    });
                }
            })
        })

    })
</script>
{% endif %}
{% else %}
<div id="block_product_single-{{ block_id | default: 'test' }}" style="padding:20px 0" class="block_product_single block_product_single-{{ section.settings.position }} {% if section.settings.is_width_fill %}block_product-fill{% endif %}">
    <div class="product-photo">
        <div class="product-photo-item">
            <img style="width: 100%" src="{{ 'empty.png' | public_asset_abs_url }}"  />
        </div>
    </div>
    <div class="product-info">
        <div class="product-info-title general_title-color">title</div>
        {% if section.settings.describe %}
        <div class="product-info-describe">describe</div>
        {% endif %}
        <div class="product-info-divider"></div>
        <div class="cell-item" style="margin-top: 0">
            <div class="product-price">
                <span class="product-price-number general_buying-color">{{ currency.symbol_left }}8.88</span>
                <span class="product-price-market general_original-color">{{ currency.symbol_left }}8.88</span>
            </div>
        </div>
        <div class="cell-item">
            <span class="product-sku-name">Quantity</span>
        </div>
        <div class="cell-item">
            <div class="product-calculator mo-quantity">
                <div class="product-calculator-handle" data-type="reduce">
                    <span class="reduce-icon"></span>
                </div>
                <div class="product-calculator-value">1</div>
                <div class="product-calculator-handle" data-type="add">
                    <span class="add-icon"></span>
                </div>
            </div>
        </div>
        <div class="cell-item">
            <div class="product-btns">
                <div class="secondary_btn add-cart" data-id="{{ block_id | default: 'test'  }}">{{lang.product.add_to_cart}}</div>
                <div class="main_btn buynow" data-id="{{ block_id | default: 'test'  }}">{{lang.product.buy_it_now}}</div>
            </div>
        </div>
    </div>
</div>

{% endif %}

{% schema %}
{
  "tag": "",
  "class": "block_product_single",
  "is_global": false,
  "name": {
    "zh_CN": "单个商品"
  },
  "max_blocks": "",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_product",
      "label": {
        "zh_CN": "选择商品"
      },
      "default": {
        "id": "id",
        "title": ""
      },
      "id": "good"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "显示副标题"
      },
      "id": "subtitle",
      "default": true
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "显示简短描述"
      },
      "id": "describe",
      "default": true
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "pc图片位置"
      },
      "default": "left",
      "id": "position",
      "option": [
        {
          "label": {
            "zh_CN": "居左"
          },
          "value": "left"
        },
        {
          "label": {
            "zh_CN": "居右"
          },
          "value": "right"
        }
      ]
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "good": {
        "id": "",
        "title": ""
      },
      "subtitle": true,
      "describe": true,
      "position": "left"
    },
    "blocks": []
  }
}
{% endschema %}
